<template>
  <div class="banner">
    About Blog
  </div>
  <br>
  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <el-card :body-style="{padding:'40px'}">
        <template #header>
          <!--居中对齐的头像-->
          <div style="display: flex">
            <div style="flex: 1;text-align: center">
              <el-image src="/blog-t.png" style="height: 80px;border-radius: 40%;padding: 10px;"></el-image>
            </div>
          </div>
        </template>
        <!--作者介绍-->
        <div>
          <h3 style="font-weight: bolder;color: #32a668">博主介绍</h3>
          <p>
            <el-tag>95后</el-tag>
            |
            <el-tag type="success">爱编程</el-tag>
            |
            <el-tag type="danger">爱猫</el-tag>
            |
            <el-tag type="warning">爱生活</el-tag>
          </p>
          <br>
          <h4 style="font-weight: bolder">求学经历（2015-2019）</h4>
          <p>
            人称蛋头，97年双子男；高中开始接触编程，但是天不遂人愿，阴差阳错中于2015年考入西安工程大学轻化工程专业，
            从此开始四年的化工知识学习之路，然，编程之心不死，在大学乃至工作期间一直自学编程，闭门造车，先后学习了前端，python等技术，
            于2019年顺利本科毕业。

          </p>
          <h4 style="font-weight: bolder">工作经历（2019-2022）</h4>
          <p>
            毕业后又在浙江从事三年化工企业实验室工作，并利用大学以及工作期间的自学知识摸索开发实验室管理系统，
            这些知识的运用也给就职的公司实验室带来了一定的价值。但终究是零散的自学，导致知识体系的不完整，总觉得越学越迷茫。
          </p>
          <p>
            终是在2022年中旬，辞去工作，决心离开化工行业，去做一些自己喜欢的事情。遂闭门报班学习java开发，期间的学习笔记一直记录在飞书文档中，
            在一段时间的学习后，学完了SpringBoot部分，学到了VUE，突发奇想，想做一个自己的笔记记录根据，就有了现在这个博客项目，用来记录自己的学习笔记等。
          </p>
          <h4 style="font-weight: bolder">联系方式</h4>
          <p>
            如果也在爱学习，爱钻研，爱技术，爱交流，可以通过以下方式联系到我：
          </p>
          <p>Q&nbsp;&nbsp;Q：916154899</p>
          <p>微信：my916154899</p>
          <p>Q Q邮箱：916154899@qq.com</p>
          <p>163邮箱：yun_simple@163.com</p>
        </div>
        <el-divider></el-divider>
        <!--项目介绍-->
        <div>
          <h3 style="font-weight: bolder;color: #32a668">项目介绍</h3>
          <p>
            这是一个基于SpringBoot + VUE 的前后端分离的个人博客项目，在学习完SpringBoot之后萌生了自己做一个博客的想法，
            一方面锻炼自己的技术，一方面存储自己的学习笔记，于是此项目在磕磕绊绊中产生。
          </p>
          <span>网络上已经有了许许多多优秀的博客项目，所以抱着学习的心态，主要参考了这位大神的作品：</span>
          <el-link href="https://gitee.com/quequnlong/shiyi-blog" target="_blank">拾壹博客</el-link>
          <h4 style="margin-top: 20px;font-weight: bolder">
            本项目的gitee地址：
          </h4>
          <p>前端项目地址：
            <el-link href="https://gitee.com/yurenziyou/dantouBlog-front" target="_blank">
              https://gitee.com/yurenziyou/dantouBlog-front
            </el-link>
          </p>
          <p>后端项目地址：
            <el-link href="https://gitee.com/yurenziyou/dantouBlog-back" target="_blank">https://gitee.com/yurenziyou/dantouBlog-back
            </el-link>
          </p>
        </div>
        <el-divider></el-divider>
        <!--信息-->
        <h3 style="font-weight: bolder;color: #32a668">技术信息</h3>
        <div style="margin-top: 10px">
          <h4 style="font-weight: bolder">后端技术</h4>
          <li>SpringBoot：可以轻松创建独立的、生产级的基于 Spring 的应用程序</li>
          <li>MybatisPlus：简化数据库操作，简化DML语句的编写工作</li>
          <li>Druid连接池：阿里提供的数据库连接池,监控DML操作</li>
          <li>lombok：简化Bean开发</li>
          <li>jjwt：实现JWT登录及验证token</li>
          <li>gson：对象到Json的转换</li>
        </div>
        <div style="margin-top: 10px">
          <h4 style="font-weight: bolder">前端技术</h4>
          <li>VUE：</li>
          <li>vue-router：vue路由</li>
          <li>pinia：vue状态管理</li>
          <li>v-md-editor：轻量，简单，快速上手的Markdown编辑与解析器</li>
          <li>prismjs：配合Markdown编辑器实现代码高亮</li>
          <li>Axios：简化Http请求</li>
        </div>

      </el-card>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>
.banner {
  background-image: url('@/assets/headImg/about.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}

p, h3, h4 {
  line-height: 2;
  margin: 5px;
}

li{
  margin: 5px;
}
</style>